<template>
  <div class="about-view">
    <section class="about-header">
      <div class="container">
        <h1 class="page-title">关于我们</h1>
        <p class="page-description">FHE Privacy Guard 是一个致力于推动全同态加密技术在实际应用中落地的开源项目</p>
      </div>
    </section>
    
    <section class="mission-section">
      <div class="container">
        <div class="mission-content">
          <div class="mission-text">
            <h2>我们的目标</h2>
            <p>在数据驱动的世界中，隐私与数据利用之间的矛盾日益突出。全同态加密作为一项革命性技术，提供了在不泄露原始数据的情况下进行计算的能力，为解决这一矛盾提供了可能。</p>
            <p>然而，全同态加密技术的复杂性和高门槛限制了其广泛应用。我们的目标是：</p>
            <ul>
              <li>认真学习同态加密算法技术</li>
              <li>促进全同态加密技术的普及和应用</li>
              <li>促进全同态加密技术在实际应用中的落地</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    
    <section class="team-section">
      <div class="container">
        <h2 class="section-title">小组成员</h2>
        <p class="section-description">我们的团队由四个组员组成</p>
        
        <div class="team-grid">
          <div class="team-member" v-for="member in teamMembers" :key="member.id">
            <div class="member-avatar">
              <img :src="member.avatar" :alt="member.name" />
            </div>
            <div class="member-info">
              <h3 class="member-name">{{ member.name }}</h3>
              <p class="member-title">{{ member.title }}</p>
              <div class="member-links">
                <p class="member-email">{{ member.email }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    
    <section class="contact-section">
      <div class="container">
        <div class="contact-grid">
          <div class="contact-info">
            <h2>联系我们</h2>
            <p>如果您对我们的项目有任何疑问、建议或合作意向，欢迎通过以下方式联系我们：</p>
            
            <div class="contact-methods">
              <div class="contact-method">
                <i class="material-icons">email</i>
                <div class="method-details">
                  <h3>电子邮件</h3>
                  <p>contact@fhe-privacy-guard.org</p>
                </div>
              </div>
              
              
              <div class="contact-method">
                <i class="material-icons">code</i>
                <div class="method-details">
                  <h3>Gitee</h3>
                  <p>https://gitee.com/lsm_123/fhe-privacy-guard</p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="contact-form">
            <h2>发送消息</h2>
            <form @submit.prevent="submitContactForm">
              <div class="form-group">
                <label for="name">姓名</label>
                <input type="text" id="name" v-model="contactForm.name" required />
              </div>
              
              <div class="form-group">
                <label for="email">电子邮件</label>
                <input type="email" id="email" v-model="contactForm.email" required />
              </div>
              
              <div class="form-group">
                <label for="subject">主题</label>
                <input type="text" id="subject" v-model="contactForm.subject" required />
              </div>
              
              <div class="form-group">
                <label for="message">消息内容</label>
                <textarea id="message" v-model="contactForm.message" rows="5" required></textarea>
              </div>
              
              <button type="submit" class="submit-btn" :disabled="isSubmitting">
                {{ isSubmitting ? '发送中...' : '发送消息' }}
              </button>
              
              <div v-if="formStatus" :class="['form-status', formStatus.type]">
                {{ formStatus.message }}
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';

// 成员数据
const teamMembers = [
  {
    id: 1,
    name: '罗尚明',
    title: '小组长',
    avatar: '/src/assets/images/member1.jpg',
    email: '1355280398@qq.com'
  },
  {
    id: 2,
    name: '桂宇轩',
    title: '组员',
    avatar: '/src/assets/images/member2.jpg',
    email: '2454217393@qq.com'
  },
  {
    id: 3,
    name: '何彦仪',
    title: '组员',
    avatar: '/src/assets/images/member3.jpg',
    email: '2198251661@qq.com'
  },
  {
    id: 4,
    name: '王一婷',
    title: '组员',
    avatar: '/src/assets/images/member4.jpg',
    email: '1572918912@qq.com'
  }
];



// 联系表单
const contactForm = reactive({
  name: '',
  email: '',
  subject: '',
  message: ''
});

const isSubmitting = ref(false);
const formStatus = ref(null);

function submitContactForm() {
  isSubmitting.value = true;
  
  // 表单提交
  setTimeout(() => {
    isSubmitting.value = false;
    formStatus.value = {
      type: 'success',
      message: '消息已发送，我们会尽快回复您！'
    };
    
    // 重置表单
    contactForm.name = '';
    contactForm.email = '';
    contactForm.subject = '';
    contactForm.message = '';
    
    // 清除状态消息
    setTimeout(() => {
      formStatus.value = null;
    }, 5000);
  }, 1500);
}


const activePrivacyTab = ref('data-collection');
</script>

<style scoped>
.about-view {
  width: 100%;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* 页面标题部分 */
.about-header {
  background-color: var(--primary-color);
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.page-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.page-description {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto;
  opacity: 0.9;
}


.mission-section {
  padding: 5rem 0;
  background-color: var(--bg-color);
}

.mission-content {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.mission-text {
  flex: 1;
}

.mission-text h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.mission-text p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.mission-text ul {
  padding-left: 1.5rem;
}

.mission-text li {
  margin-bottom: 0.75rem;
}

.mission-image {
  flex: 1;
  display: flex;
  justify-content: center;
}

.mission-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 成员部分 */
.team-section {
  padding: 5rem 0;
  background-color: var(--card-bg);
}

.section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.section-description {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem;
  color: var(--text-secondary);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.team-member {
  background-color: var(--bg-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.team-member:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.member-avatar {
  height: 250px;
  overflow: hidden;
}

.member-avatar img {
  width: 100%;
  height: 150%;
  object-fit: cover;
}

.member-info {
  padding: 1.5rem;
}

.member-name {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.member-title {
  color: var(--primary-color);
  font-weight: 600;
  margin-bottom: 1rem;
}


.member-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--footer-bg);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.social-link:hover {
  background-color: var(--primary-color);
  color: white;
}


/* 联系部分 */
.contact-section {
  padding: 5rem 0;
  background-color: var(--bg-color);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-info h2,
.contact-form h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.contact-methods {
  margin-top: 2rem;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.contact-method i {
  font-size: 2rem;
  color: var(--primary-color);
  margin-right: 1rem;
}

.method-details h3 {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--card-bg);
  color: var(--text-color);
}

.submit-btn {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: var(--primary-dark);
}

.submit-btn:disabled {
  background-color: var(--text-secondary);
  cursor: not-allowed;
}

.form-status {
  margin-top: 1rem;
  padding: 0.75rem;
  border-radius: 4px;
}

.form-status.success {
  background-color: rgba(39, 174, 96, 0.1);
  color: #27ae60;
  border: 1px solid #27ae60;
}

.form-status.error {
  background-color: rgba(231, 76, 60, 0.1);
  color: #e74c3c;
  border: 1px solid #e74c3c;
}


.tab-btn {
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  color: var(--text-color);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

.tab-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.tab-btn.active {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
}

.privacy-tab-content {
  padding: 2rem;
}

.tab-pane h3 {
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.tab-pane p {
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.tab-pane ul {
  padding-left: 1.5rem;
  margin-bottom: 1.5rem;
}

.tab-pane li {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

/* 响应式设计 */
@media (max-width: 992px) {
  .mission-content {
    flex-direction: column;
  }
  
  .contact-grid {
    grid-template-columns: 1fr;
  }
  
  .timeline-content {
    width: 80%;
    margin: 0 auto !important;
    text-align: left !important;
  }
  
  .timeline::before {
    left: 10%;
  }
  
  .timeline-dot {
    left: 10%;
  }
}

@media (max-width: 768px) {
  .privacy-tabs {
    flex-wrap: wrap;
  }
  
  .tab-btn {
    flex: 1 0 50%;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .page-title {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.75rem;
  }
  
  .team-grid,
  .partners-grid {
    grid-template-columns: 1fr;
  }
  
  .tab-btn {
    flex: 1 0 100%;
  }
}
</style>